<template>
  <div class="header">
    <header-back-icon :backIconShow="backIconShow"></header-back-icon>
    <header-logo></header-logo>
    <header-list-icon :listIconShow="listIconShow"></header-list-icon>
  </div>
</template>
<script>
import HeaderBackIcon from './BackIcon'
import HeaderLogo from './Logo'
import HeaderListIcon from './ListIcon'
export default {
  name: 'Header',
  props: {
    backIconShow: {
      type: Boolean,
      default() {
        return false
      }
    },
    listIconShow: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  components: {
    HeaderBackIcon,
    HeaderLogo,
    HeaderListIcon
  }
}
</script>
<style lang="scss" scoped>
  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: .44rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }
</style>